<template>
  <div class="item">
    <div class="user" :class="{'user-move': del}">
      <avatar :imgUrl="this.$store.state.avatar" @click.native="avatarClick"/>
      <div class="username">{{this.$store.state.nickname}}</div>
    </div>
    <div class="comment" @click="contentClick" :class="{'comment-move': del}">{{content.content}}</div>
    <div class="delete" :class="{'delete-move': del}" @click="btnClick">删除</div>
  </div>
</template>
<script>
import Avatar from 'common/avatar/Avatar'
import { animateCSS } from 'common/animate.js'
import { Toast } from 'mint-ui'
export default {
  name: 'CommentItemForMyComment',
  props: {
    content: Object,
    id: [String, Number]
  },
  components: {
    Avatar
  },
  data () {
    return {
      timer: null,
      del: false
    }
  },
  methods: {
    avatarClick (e) {
      animateCSS(e.target, 'bounceIn')
    },
    // touchStart () {
    //   let that = this
    //   clearTimeout(this.timer)
    //   this.timer = setTimeout(() => {
    //     if (this.$store.state.userStatus) {
    //       that.$emit('delete', this.id, this.content.time)
    //     }
    //   }, 600)
    // },
    // touchEnd () {
    //   clearTimeout(this.timer)
    // },
    // touchMove () {
    //   clearTimeout(this.timer)
    // }
    contentClick () {
      this.del = !this.del
    },
    btnClick () {
      this.$emit('delete', this.id, this.content.time)
      Toast({
        message: '删除成功',
        position: 'bottom',
        duration: 2000
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .item
    box-sizing: border-box
    width: 100%
    padding: .1rem
    align-items: center
    position: relative
    display: flex
    align-items: center
    .user-move
      transform: translate3d(-1rem, 0, 0)
      opacity: 0
    .user
      display:flex
      flex-direction: column
      justify-content center
      align-items: center
      width:.7rem
      height: .7rem
      transition: all .5s
      .username
        padding-top: .04rem
        font-size: .16rem
    .comment-move
      transform: translate3d(-.72rem, 0, 0)
    .comment
      z-index: 1
      width: 2.8rem
      box-sizing: border-box
      padding: .15rem .2rem
      font-size: .2rem
      line-height: .3rem
      background: #F8F1F0
      border-radius: .5rem
      transition: all .5s
      overflow-x: hidden
      text-overflow: ellipsis
    .delete
      width: .6rem
      height: .45rem
      opacity: 0
      float: left
      position: absolute
      right: -.5rem
      transition: all .5s
      font-size: .2rem
      line-height:.45rem
      border-radius: 10%
      background:red
      color: #fff
      text-align: center
    .delete-move
      transform: translate3d(-.66rem, 0, 0)
      opacity: 1
</style>
